
    <%- include('header.html') -%>
	<!-- technology-left -->
	<div class="technology">
        <div class="container">
            <div class="col-md-9 technology-left">
                <div class="tech-no">
                    <div class="wthree" style="background:#333;padding: 1em;">
                        <div class="col-md-12 wthree-right wow fadeInDown"  data-wow-duration=".8s" data-wow-delay=".2s" >
                            <h2 style="color:#ccc"><%= categoryId.name %></h2>
                            <div class="content"><%= categoryId.details %></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <!-- technology-top -->
                    <% articles.forEach(article =>{ %>
                    <div class="wthree">
                        <div class="col-md-12 wthree-right wow fadeInDown"  data-wow-duration=".8s" data-wow-delay=".2s">
                            <h3><a href="/article/<%=article.id%>"><%= article.title %></a></h3>
                            <h6>作者： <a href="singlepage.html"><%= article.author %></a><%= article.time.toLocaleString() %></h6>
                            <div class="content"><%= article.content.replace(/<[^>]+>/g,'').substring(0,50) %>...</div>
                            <div class="bht1">
                                <a href="/article/<%=article.id%>">Read More</a>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <% }); %>
                </div>
                <!-- 分页 -->
                <div class="wthree" style="padding:0.5em">
                    <div class="col-md-12 wthree-right wow fadeInDown"  data-wow-duration=".8s" data-wow-delay=".2s">
                        <nav >
                            <ul class="pagination mt-3" style="width: 100%;margin: 0;text-align: center; line-height: 2em;font-size: 0.8em;color:#bbb;">
                                <% if(page.p != 1){ %>
                                <li class="page-item" style="float: left;">
                                    <a class="page-link" href="/article/list/<%= categoryId.id%>?p=<%= page.p -1 %>" style="color:#aaa">上一页</a>
                                </li>
                                <% }%>
                                page <%= page.p %> of <%= page.total %>
                                <% if(page.p != page.total){ %>
                                <li class="page-item ml-auto" style="float: right;">
                                    <a class="page-link" href="/article/list/<%= categoryId.id%>?p=<%= parseInt(page.p) + 1 %>" style="color:#aaa">下一页</a>
                                </li>
                                <% }%>
                            </ul>
                        </nav>
                    </div>
                    <div class="clearfix"></div>
                </div>
                
            </div>
            <!-- technology-right -->
            <%- include('right.html') -%>
            <!-- technology-right -->
        </div>
        
    </div>
<!-- 引入尾部 -->
<%- include('footer.html') -%>